﻿<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 100px; border-bottom-width: 1px; padding: 10px; font-size: 14px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Datagrid/ViewOperateColumnSource" target="_blank">点击查看扩展代码</a>
        <br />
        js依赖项：
        <br />
        [query-1.11.0.js]、[jquery.jdirk.js]、[jquery.easyui.min.js]、[jeasyui.extensions.datagrid.getColumnInfo.js]、[jeasyui.extensions.datagrid.getDom.js]、[jeasyui.extensions.datagrid.operateColumn.js]
    </div>
    <div data-options="region:'center',border:false,title:'此处仅显示“功能演示”选项卡所示功能基于本扩展的实现源码'" style="padding: 15px; font-size: 14px;">
        <a href="~/Demos/ExtensionDemos/Datagrid/OperateColumnDemo.zip" target="_self">下载本扩展功能演示Demo</a>
        <br />
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:20%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>onBeforeDeleteColumn</td>
                <td>Function 类型</td>
                <td>
                    该事件表示删除指定的列前触发的动作；该事件回调函数提供如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>field:  表示要被删除的列的 field 值。<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；<br />
                    备注：如果该事件回调函数返回 false，则不进行删除列的操作。
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onDeleteColumn</td>
                <td>Function 类型</td>
                <td>
                    该事件表示删除指定的列后触发的动作；该事件回调函数提供如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>field:  表示要被删除的列的 field 值。<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；<br />
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onBeforeMoveColumn</td>
                <td>Function 类型</td>
                <td>
                    该事件表示移动指定的列前触发的动作；该事件回调函数提供如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source:  表示要被移动的列的 field 值。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target:  表示目标位置的列的 field 值。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point :  表示移动的方式；这是一个 String 类型值，可能的值包括：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示将列 source 移动至列 target 的前一格位置；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after" :   表示将列 source 移动至列 target 的后一格位置；<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；
                    备注：如果该事件回调函数返回 false，则不进行移动列的操作。
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onMoveColumn</td>
                <td>Function 类型</td>
                <td>
                    该事件表示移动指定的列后触发的动作；该事件回调函数提供如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source:  表示要被移动的列的 field 值。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target:  表示目标位置的列的 field 值。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point :  表示移动的方式；这是一个 String 类型值，可能的值包括：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示将列 source 移动至列 target 的前一格位置；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after" :   表示将列 source 移动至列 target 的后一格位置；<br />
                    该事件函数中的 this 指向当前 easyui-datagrid 的 DOM 对象(非 jQuery 对象)；
                </td>
                <td>空</td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展方法API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width:5%;">重写</td>
                <td style="width:7%;">参数</td>
                <td>描述</td>
            </tr>
            <tr>
                <td>deleteColumn</td>
                <td>否</td>
                <td>field</td>
                <td>
                    删除指定的列；该方法的参数 field 表示要删除的列的 field 值；<br />
                    返回值：返回表示当前 easyui-datagrid 组件的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>popColumn</td>
                <td>否</td>
                <td>field</td>
                <td>
                    删除指定的列并返回该列的 ColumnOption 值；该方法的参数 field 表示要删除的列的 field 值；<br />
                    返回值：返回参数 field 值所表示的列的 ColumnOption 值。如果当前 easyui-datagrid 不存在该列，则返回 undefined。
                </td>
            </tr>
            <tr>
                <td>moveColumn</td>
                <td>否</td>
                <td>param</td>
                <td>
                    移动指定的列到另一位置；该方法的参数 param 为一个 JSON-Object，定义包含如下属性：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target: 表示目标位置列的 field 值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source: 表示要移动的列的 field 值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point:  表示移动到目标列的位置，String 类型，可选的值包括：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>before: 表示将 source 列移动至 target 列的左侧；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>after:  表示将 source 列移动值 target 列的右侧；<br />
                    返回值：返回表示当前 easyui-datagrid 组件的 jQuery 链式对象。<br />
                    备注：该方法会触发移动列数据的相应事件；<br />
                    注意：此方法在多行表头情况下无效。
                </td>
            </tr>
            <tr>
                <td>shiftColumn</td>
                <td>否</td>
                <td>param</td>
                <td>
                    移动指定的列挪动一格位置；该方法的参数 param 为一个 JSON-Object，定义包含如下属性：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>field:  表示要挪动的列的 field 值；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>porint: 表示挪动 field 列的方式，String 类型，可选的值包括：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>before: 表示将该列向左挪动一格；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>after:  表示将该列向右挪动一格；<br />
                    返回值：返回表示当前 easyui-datagrid 组件的 jQuery 链式对象。<br />
                    备注：该方法会触发移动列数据的相应事件；<br />
                    注意：此方法在多行表头情况下无效。
                </td>
            </tr>
            <tr>
                <td>freezeColumn</td>
                <td>否</td>
                <td>field</td>
                <td>
                    冻结指定的列；该方法的参数 field 表示要冻结的列的 field 值。<br />
                    返回值：返回表示当前 easyui-datagrid 的 jQuery 链式对象。<br />
                    注意：此方法在多行表头情况下无效。<br />
                    当前表格在执行此方法前必须存在至少一个冻结列，否则此方法无效。
                </td>
            </tr>
            <tr>
                <td>unfreezeColumn</td>
                <td>否</td>
                <td>field</td>
                <td>
                    取消冻结指定的列；该方法的参数 field 表示要取消冻结的列的 field 值。<br />
                    返回值：返回表示当前 easyui-datagrid 的 jQuery 链式对象。<br />
                    注意：此方法在多行表头情况下无效。<br />
                    当前表格在执行此方法前必须存在至少一个非冻结列，否则此方法无效；
                </td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            列扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>movable</td>
                <td>Boolean 类型</td>
                <td>
                    表示该列是否可移动
                </td>
                <td>true</td>
            </tr>
        </table>
    </div>
</div>
